import {ActivityIndicator, Modal, StyleSheet, Text, View} from 'react-native';
import React from 'react';
import PropTypes from 'prop-types';

class Spinner extends React.Component {
  static propTypes = {
    color: PropTypes.string,
    overlayColor: PropTypes.string,
    textContent: PropTypes.string,
    visible: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'large', PropTypes.number]),
    spinnerKey: PropTypes.string,
    onClose: PropTypes.func,
  };
  static defaultProps = {
    color: 'white',
    overlayColor: 'rgba(0, 0, 0, 0.8)',
    textContent: '',
    size: 'large',
    visible: false,
    spinnerKey: `spinner_${Date.now()}`,
    onClose: () => {},
  };

  _renderDefaultContent = () => {
    const {color, size, textContent, overlayColor} = this.props;
    return (
      <View style={[Styles.background, {backgroundColor: overlayColor}]}>
        <ActivityIndicator
          color={color}
          size={size}
          style={Styles.activityIndicator}
        />
        <View style={Styles.textContainer}>
          <Text style={[Styles.textContent, {color}]}>{textContent}</Text>
        </View>
      </View>
    );
  };

  render() {
    const {visible, onClose} = this.props;
    return (
      <Modal
        visible={visible}
        onRequestClose={onClose}
        supportedOrientations={['landscape', 'portrait']}
        transparent
        statusBarTranslucent={true}>
        {this._renderDefaultContent()}
      </Modal>
    );
  }
}

export default Spinner;

const Styles = StyleSheet.create({
  activityIndicator: {
    flex: 1,
  },
  background: {
    alignItems: 'center',
    bottom: 0,
    justifyContent: 'center',
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
  },
  container: {
    backgroundColor: 'transparent',
    bottom: 0,
    flex: 1,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
  },
  textContainer: {
    alignItems: 'center',
    bottom: 0,
    flex: 1,
    justifyContent: 'center',
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
  },
  textContent: {
    fontSize: 12,
    fontWeight: 'bold',
    height: 50,
    width: 88,
    top: 72,
    textAlign: 'center',
  },
});
